<!--
	作者：956911785@qq.com
	时间：2019年8月1日17:44:32
	描述：书籍管理-添加书籍
-->

<template>
	<Modal :title="title" v-model="modal0" width="1000px">
		<Form ref="params" :model="params" :rules="ruleValidate" :label-width="120" label-position="left">
			<div style="width:100%;height:600px; overflow-y: scroll;">
		      	
		      	<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 80%;text-align: left;float: left;" align="left">
				        <FormItem  label="书籍分类"  prop="classid">
						    <Select v-model="params.pid" style="width:45%;float:left;" clearable @on-change="getnextClass">
						        <Option v-for="item in pclass" :value="item.CLASSID" :key="item.CLASSNAME">{{ item.CLASSNAME }}</Option>
						    </Select>
						    <Select v-model="params.classid" style="width:45%;float:left;" clearable>
						        <Option v-for="item in nclass" :value="item.CLASSID" :key="item.CLASSNAME">{{ item.CLASSNAME }}</Option>
						    </Select>
						</FormItem>
		        	</div>
		        </div>

				<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="bookname" label="书名">
				        	<Input v-model="params.bookname" placeholder="请输入书名" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="author" label="作者姓名">
				        	<Input v-model="params.author" placeholder="请输入作者姓名" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		      	</div>
		      	
		      	<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="totalpage" label="总页数">
				        	<Input v-model="params.totalpage" placeholder="请输入本书共多少页" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="minnum" label="每天最低读书量">
				        	<Input v-model="params.minnum" placeholder="请输入每天最低读书量" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		      	</div>

		      	<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="nj" label="推荐年级">
				        	<Input v-model="params.nj" placeholder="请输入推荐年级" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<!-- <div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem label="推荐班级">
				        	<Input v-model="params.bj" placeholder="请输入推荐班级" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div> -->
					<div style="width: 50%;text-align: left;float: left;" align="left">
					    <FormItem prop="bookxx" label="书籍基本信息">
					    	<Input v-model="params.bookxx" placeholder="请输入书籍基本信息,例如出版社等等" clearable style="width: 90%"></Input>
						</FormItem>
					</div>
		      	</div>
		      	
		      	<div style="width:100%;float:left;">
					<div style="width: 50%;text-align: left;float: left;" align="left">
					    <FormItem prop="words" label="本书总字数">
					    	<Input v-model="params.words" placeholder="请输入本书总字数" clearable style="width: 90%"></Input>
						</FormItem>
					</div>
					<div style="width: 50%;text-align: left;float: left;" align="left">
					    <FormItem prop="bookjj" label="本书简介">
					    	<Input v-model="params.bookjj"  type="textarea" :rows="4" placeholder="请输入本书简介" clearable style="width: 90%"></Input>
						</FormItem>
					</div>
		        </div>

		      	<div style="width:100%;float:left;">
					<div style="width: 50%;text-align: left;float: left;" align="left">
					    <FormItem prop="reason" label="推荐理由">
					    	<Input v-model="params.reason"  type="textarea" :rows="4" placeholder="请输入推荐理由" clearable style="width: 90%"></Input>
						</FormItem>
					</div>
					<div style="width: 50%;text-align: left;float: left;" align="left">
					    <FormItem prop="authorjj" label="作者简介">
					    	<Input v-model="params.authorjj"  type="textarea" :rows="4" placeholder="请输入作者简介" clearable style="width: 90%"></Input>
						</FormItem>
					</div>	
		      	</div>
		      	
		      	<div style="width:100%;height: auto;float:left;">
					<div style="width: 50%;float:left;">
						<div style="float:left;">
							<FormItem label="请上传本书封面">
								<Upload
									ref="upload"
									:show-upload-list="false"
									:on-success="handleSuccess"
									:format="['jpg','jpeg','png']"
									:max-size="2048"
									:on-format-error="handleFormatError"
									:on-exceeded-size="handleMaxSize"
									type="drag"
									:action="action"
									style="display: inline-block;width:80px;">
									<div style="width: 80px;height:80px;line-height: 80px;">
										<Icon type="ios-camera" size="20"></Icon>
									</div>
								</Upload>
							</FormItem>
						</div>
						<div style="float:left;width:120px;float:left;">
							<template v-if="photos.status === 'finished'">
								<img :src="imgurl"  style="width:120px;height: auto;float:left;">
								<div style="width:120px;float:left;text-align: center;">
									<Icon type="ios-eye-outline" style="font-size:16px;" @click.native="handleView()"></Icon>
									<Icon type="ios-trash-outline" style="font-size:16px;padding-left:10px;" @click.native="handleRemove(photos)"></Icon>
								</div>
							</template>
						</div>
					</div>
					
				    <Modal title="View Image" v-model="visible">
				        <img :src="imgurl" v-if="visible" style="width: 100%">
				    </Modal>
			    </div> 
				
				
				<div style="width:100%;height: auto;float:left;">
					<FormItem label="是否通过审核">
				    	<Select v-model="params.sh" style="width:200px">
					        <Option value="1" >通过</Option>
					        <Option value="2" >不通过</Option>
					    </Select>
					</FormItem>
				</div>
				
		      	
		   </div> 
	    </Form>
	   	<div slot="footer">
	    	<Button type="text"  @click="closeModal()">取消</Button>
	    	<Button type="primary" @click="addsave()" >确定</Button>
	    </div>
    </Modal>
</template>

<script>

	const _config = require('./../../../../../config/config')
	export default {
		name:"tconent",
		props: {
    		teas:{
    			type:Object,	
    			default: function() {
					return null
				}
    		},
    		title:{
    			type:String,	
    		},
    	},
		data() {
			//长度控制
			const lenPass = (rule, str, callback) => {
			  if(str.length>rule.length){
			  	 callback(new Error('字符串长度在1-'+rule.length+'之间！'));
			  }
			  return callback();
			};
			//正整数控制
			const zzsPass1 = (rule, value, callback) => {
			    let reg = /^\+?[0-9][0-9]*$/; 
				if(!reg.test(value)){
				    callback(new Error('请输入正整数！'));
				}else{
				  	return callback();
				}
			};
			return {
				ruleValidate: {
					classid: [
		                {required: true, message: '请选择书籍分类！', trigger: 'blur'},
		            ],
		            bookname: [
		                {required: true, message: '请输入书籍名称！', trigger: 'blur'},
		                {length:30,validator:lenPass,trigger:'blur'}
		            ],
		            totalpage: [
		                {required: true, message: '请输入本书总页数！', trigger: 'blur'},
		                {validator:zzsPass1,trigger:'blur'}
		            ],
		            minnum: [
		                {required: true, message: '请输入每天最低读书量！', trigger: 'blur'},
		                {validator:zzsPass1,trigger:'blur'}
		            ],
		            nj: [
		                {required: true,message: '请输入推荐阅读年级！', trigger: 'blur'},
		                {validator:zzsPass1,trigger:'blur'}
		            ],
		            author: [
		                {required: true, message: '请输入本书作者！', trigger: 'blur'},
		                {length:50,validator:lenPass,trigger:'blur'}
		            ],
					bookxx: [
					    {required: true, message: '请输入书籍基本信息,例如出版社等等！', trigger: 'blur'}
					],
					bookjj: [
					    {required: true, message: '请输入本书简介！', trigger: 'blur'}
					],
					reason: [
					    {required: true, message: '请输入推荐理由！', trigger: 'blur'}
					],
					authorjj: [
					    {required: true, message: '请输入作者简介！', trigger: 'blur'}
					],
					words: [
					    {required: true, message: '请输入本书总字数！', trigger: 'blur'},
					    {validator:zzsPass1,trigger:'blur'}
					],
		        },   
                modal0:false,
                params:{
                	bid:'', //主键id
					pid:'',//上级分类
					classid:'',//分类id
					bookname:'', //书名
					totalpage:'', //总页数
					minnum:'', //每天最低读书量
					fm:'', //封面
					nj:'', //推荐阅读年级
					bj:'', //推荐阅读班级
					author:'', //作者
					reason:'', //推荐理由
					bookjj:'', //书籍简介
					authorjj:'', //作者简介
					bookxx:'', //书籍基本信息
					words:'', //总字数
					sh:0
                },
                pclass:[],//上级分类
				nclass:[],//下级分类
				action:_config._ADMIN_SERVER+'/readbook/upload/filesUploadBookfm.html',
				
				imgurl: '',
                visible: false,
                photos: {},
			}
		},
		methods: {
			addsave:function(){
				this.$refs.params.validate((valid) => {
					if (valid){
						const params={...this.params};
						this.$emit("addsave",params);
                    }
                })
	        }, 
            closeModal(){
	      	    this.modal0 = false;
	      	    this.resetpar();
	        },
	        resetpar(){
	        	this.params={
	        		bid:'', //主键id
					pid:'',//上级分类
					classid:'',//分类id
					bookname:'', //书名
					totalpage:'', //总页数
					minnum:'', //每天最低读书量
					fm:'', //封面
					nj:'', //推荐阅读年级
					bj:'', //推荐阅读班级
					author:'', //作者
					reason:'', //推荐理由
					bookjj:'', //书籍简介
					authorjj:'', //作者简介
					bookxx:'', //书籍基本信息
					words:'', //总字数
					sh:0
				};
				this.imgurl="";
				this.photos={
	            	status:'',
	            	showProgress:"",
	            	percentage:0
	            }
						
	        },
	        getPidClass(){
	        	//上级分类查询
	        	this.$http.post("/host/readbook/sjfl/getPidClass.html")
				.then(result => {
					this.pclass=result;
				});
				this.getnextClass();
	        },
 			getnextClass(){
	        	if(this.params.pid){
	        		//上级分类查询
		        	this.$http.post("/host/readbook/sjgl/getChildClass.html?pid="+this.params.pid)
					.then(result => {
						this.nclass=result;
					});
	        	}else{
	        		this.nclass=[];
	        	}
	        },
	        
	        
	        
	        handleView () {
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                const photos={
                	status:'',
                	showProgress:"",
                	percentage:0
                }
                this.photos=photos;
                this.imgurl="";
                this.params.fm="";
            },
            handleSuccess (res, file) {
              	const files=this.$refs.upload.fileList;
                const photos={
                	status:'finished',
                	showProgress:files[0].showProgress,
                	percentage:files[0].percentage
                }
                this.imgurl=_config._ADMIN_SERVER+"/readbook/"+res[0].FILE_PATH;
                this.photos=photos;
                file.url = res[0].FILE_PATH;
                file.name =res[0].FILE_NAME;
                this.params.fm=res[0].FILE_PATH;
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },
            
            
		},
		mounted() {
		},
		watch:{
			modal0(news,olds){
				if(!news){
					 this.resetpar();
				}else{
					this.params={...this.teas};
					if(this.params.fm){
						this.imgurl=_config._ADMIN_SERVER+"/readbook/"+this.params.fm;
						this.photos={
		                	status:'finished',
		                	showProgress:"",
		                	percentage:100
		                }
					}
					this.getPidClass();
				}
			}
		},
		computed: {
		
		}
		
	}
</script>

<style scoped="scoped">
	
</style>



